<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            height: 700px;
            border: 2px solid blue;
            margin: 50px auto;
            padding: 20px;
            border-radius: 20px;
            background: #EAECF3;
        }

        .box #show {
            width: 500px;
            height: 120px;
            background-color: #fff;
            border-radius: 20px;
            font-size: 60px;
            text-indent: 20px;
            font-weight: 700;
        }

        .box .box1 {
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            justify-content: space-evenly;
        }

        .box .box1 input {
            width: 110px;
            height: 100px;
            margin-top: 15px;
            font-size: 32px;
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" id="show" value="0">
        <div class="box1">
            <input type="button" value="(">
            <input type="button" value=")">
            <input type="button" value="%" id="btnMo">
            <input type="button" value="AC" id="btnAC">
            <input type="button" value="7" id="btn7">
            <input type="button" value="8" id="btn8">
            <input type="button" value="9" id="btn9">
            <input type="button" value="/" id="btnChu">
            <input type="button" value="4" id="btn4">
            <input type="button" value="5" id="btn5">
            <input type="button" value="6" id="btn6">
            <input type="button" value="*" id="btnCheng">
            <input type="button" value="1" id="btn1">
            <input type="button" value="2" id="btn2">
            <input type="button" value="3" id="btn3">
            <input type="button" value="-" id="btnJian">
            <input type="button" value="0" id="btn0">
            <input type="button" value=".">
            <input type="button" value="=" id="btnDeng">
            <input type="button" value="+" id="btnJia">
        </div>
    </div>
    <script>
        /* 需要定义一个str,用来存储计算的内容 */
        var str = ""
        /* 定义一个变量,专门用来存储运算符号的 */
        var ys = ""
        /* 点击1 */
        btn1.onclick = function () {
            str += "1"
            show.value = str;
        }
        /* 点击2 */
        btn2.onclick = function () {
            str += "2"
            show.value = str;
        }
        /* 点击3 */
        btn3.onclick = function () {
            str += "3"
            show.value = str;
        }
        /* 点击4 */
        btn4.onclick = function () {
            str += "4"
            show.value = str;
        }
        /* 点击5 */
        btn5.onclick = function () {
            str += "5"
            show.value = str;
        }
        /* 点击6 */
        btn6.onclick = function () {
            str += "6"
            show.value = str;
        }
        /* 点击7 */
        btn7.onclick = function () {
            str += "7"
            show.value = str;
        }
        /* 点击8 */
        btn8.onclick = function () {
            str += "8"
            show.value = str;
        }
        /* 点击9 */
        btn9.onclick = function () {
            str += "9"
            show.value = str;
        }
        /* 点击0 */
        btn0.onclick = function () {
            str += "0"
            show.value = str;
        }
        /* 点击+ */
        btnJia.onclick = function () {
            str += "+"
            ys = "+"
            show.value = str;
        }
        /* 点击- */
        btnJian.onclick = function () {
            str += "-"
            ys = "-"
            show.value = str;
        }
        /* 点击* */
        btnCheng.onclick = function () {
            str += "*"
            ys = "*"
            show.value = str;
        }
        /* 点击/ */
        btnChu.onclick = function () {
            str += "/"
            ys = "/"
            show.value = str;
        }
        /* 点击% */
        btnMo.onclick = function () {
            str += "%"
            ys = "%"
            show.value = str;
        }
        /* AC 清除 */
        btnAC.onclick = function () {
            //让show显示0
            show.value = "0"
            //让字符串为""
            str = ""
        }
        /* 
            等号的处理
        */
        btnDeng.onclick = function () {
            //    console.log(str,ys);
            switch (ys) {
                case "+":
                    var arr = str.split("+")
                    show.value = +arr[0] + +arr[1]
                    break;
                case "-":
                    var arr = str.split("-")
                    show.value = arr[0] - arr[1]
                    break;
                case "*":
                    var arr = str.split("*")
                    show.value = arr[0] * arr[1]
                    break;
                case "/":
                    var arr = str.split("/")
                    show.value = parseInt(arr[0] / arr[1])
                    break;
                case "%":
                    var arr = str.split("%")
                    show.value = arr[0] % arr[1]
                    break;
            }
            str = ""
        }
    </script>
</body>

</html>